<template>
  <div class="container-box">
    <header v-if="$slots.header" class="header-box">
      <slot name="header"></slot>
    </header>
    <section class="section-box">
      <slot></slot>
    </section>
    <footer v-if="$slots.footer" class="footer-box">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.container-box {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .section-box {
    flex: 1;
    height: 1px;
  }
}
</style>
